<template>
  <v-layout type="main">
    <div class="layout-top">
      <div class="rollback" @click="$router.push('/gameConvert')">
        <img src="~@/assets/img/prev.png" alt />
        <span>返回</span>
      </div>

      <div class="code-description">
        <div class="dea_top">
          <div>
            <el-image
              class="nav_box"
              :src="detailData.model.avatar ? detailData.model.avatar : require('@/assets/img/drone3.jpg')"
              fit="fit"
            ></el-image>
          </div>

          <div class="header_box">
            <div class="code-desc-header">
              <div class="title">
                <div class="title-header">
                  <span>{{ detailData.model.name }}</span>
                </div>

                <div class="code-tags">
                  <div class="user-tag tag">
                    <img src="~@/assets/img/user.png" alt />
                    {{
                    detailData.create_user && (detailData.create_user.nick_name || detailData.create_user.username)
                    }}
                  </div>

                  <div
                    :class="[
											'status-tag tag',
											{
												danger: detailData.status === 'terminated',
												warning: detailData.status != 'terminated' && detailData.status != 'running',
												success: detailData.status === 'running',
											},
										]"
                  >{{ statusMap[detailData.status] }}</div>

                  <div class="time-tag tag">
                    <span>创建时间：</span>
                    {{ detailData.create_time }}
                  </div>

                  <div class="time-tag tag">
                    <span>更新时间：</span>
                    {{ detailData.update_time }}
                  </div>
                </div>

                <div class="staet_box">
                  <plug-state :statusStr="detailData.status" />
                </div>
              </div>
              <!-- <div class="code-status">
              <plug-state :statusStr="detailData.status" />
              </div>-->
            </div>
          </div>
        </div>

        <!-- <div class="desc-container">
        <el-input type="textarea" placeholder="暂无描述信息" :autosize="{ minRows: 4, maxRows: 4 }" disabled
          v-model="detailData.desc" style="cursor: pointer" />
        </div>-->
      </div>

      <div class="btns-container">
        <div class="alick-handle-btns">
          <!-- <a class="handle-btn" href="javascript:;" @click="start" v-show="detailData.status == 'terminated'">启动</a>
          <a class="handle-btn" href="javascript:;" @click="stop" v-show="detailData.status != 'terminated'">停止</a>
          <a class="handle-btn" href="javascript:;" @click="entry" v-show="detailData.status == 'running'">进入</a>-->

          <el-button
            class="handle-btn"
            type="success"
            size="medium"
            @click="start"
            v-show="detailData.status == 'terminated'"
          >启动</el-button>
          <el-button
            class="handle-btn"
            type="danger"
            size="medium"
            @click="stop"
            v-show="detailData.status != 'terminated'"
          >停止</el-button>
          <!--          <el-button class="handle-btn" type="primary" size="medium" @click="entry"-->
          <!--                     v-show="detailData.status == 'running'">-->
          <!--            进入-->
          <!--          </el-button>-->
        </div>
      </div>
    </div>

    <div class="tabs-left">
      <el-tabs v-model="nowRouter" @tab-click="skip" v-show="!$route.meta.hideDetails">
        <el-tab-pane :label="e.meta.title" :name="e.name" v-for="(e, i) in thisRouter" :key="i" />
      </el-tabs>
    </div>

    <div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">
      <router-view
        class="content-detail"
        :version="version"
        :detailData.sync="detailData"
        v-if="detailData"
        @getDetail="getDetail"
      />
    </div>
  </v-layout>
</template>

<script>
import plugState from "@/components/module/plug-state";
import {
  getModelConvertDetail,
  startModelConvert,
  stopModelConvert
} from "@/api/modelConvert";

export default {
  data() {
    return {
      nowRouter: this.$route.name,
      thisRouter: [],
      version: { id: this.$route.query.model_eva_id },
      detailData: null,
      model_eva_id: this.$route.query.model_eva_id
    };
  },
  components: {
    plugState
  },
  methods: {
    skip() {
      let path = `/gameConvert/${
        this.thisRouter.filter(e => e.name == this.nowRouter)[0].path
      }`;
      if (path == this.$route.path) return;
      this.$router.push({
        path,
        query: {
          model_eva_id: this.model_eva_id,
          id: this.$route.query.id
        }
      });
    },
    async getDetail() {
      let ret = await getModelConvertDetail({ id: this.model_eva_id });
      console.log(ret);
      console.log("详情信息", ret.data);
      this.detailData = ret.data;
      if (this.detailData.type_id == 1) {
        this.detailData.type = { name: "自定义", id: "1" };
        this.showDiv = true;
      }
    },
    async start() {
      await startModelConvert({ id: this.model_eva_id });
      this.getDetail();
    },
    async stop() {
      await stopModelConvert({ id: this.model_eva_id });
      this.getDetail();
    }
  },
  mounted() {
    let temp = this.$router.options.routes.filter(
      e => e.name == "gameConvert" && e.children
    );
    this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails);
    this.getDetail();

  },
  destroyed() {
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-layout.less";

.desc-container {
  margin-top: 20px;
}
</style>
